<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>商品详情</title>
        <jsp:include page="top-link.jsp"></jsp:include>
        <link rel="shortcut icon" href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/head.css"/>
        <link rel="stylesheet" type="text/css"
              href="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/css/details.css"/>
    </head>
    <body>

        <%--        头部导航栏--%>
        <%@include file="top-nav.jsp" %>

        <div class="detalis-center" style="height: 480px">
            <div class="detalis-center-left">
                <img src="${jsonData.data.ticketDetailsTicketImgUrl}">
            </div>
            <div class="detalis-center_right">
                <h2>【${jsonData.data.ticketAddressCity}】${jsonData.data.ticketDetailsInfo}</h2>
                <p>时间:
                    <fmt:formatDate value="${jsonData.data.ticketStartTime}" var="validDate1"
                                    pattern="yyyy.MM.dd"/> ${validDate1}
                    ~<fmt:formatDate value="${jsonData.data.ticketEndTime}" var="validDate" pattern="MM.dd"/>${validDate}
                </p>

                <p>场馆：${jsonData.data.ticketAddressVenue}<a target="_blank"
                                                            href="https://ditu.amap.com/regeo?spm=a2oeg.project.projectinfo.daddress.48b8f83frTlqUA&lng=121.59054&lat=31.312099&name=%E4%B8%8A%E6%B5%B7%E5%B8%82&src=damai&callnative=0&platform=pc"><i
                        class="layui-icon layui-icon-location"></i></a></p>
                <p><i class="layui-icon layui-icon-tips"> </i>场次时间均为演出当地时间</p>
                <p style="margin-bottom: 10px;">场次</p>
                <c:forEach items="${jsonData.data.ticketTime}" var="u" varStatus="status">
                <span>
                    <button id="btn-color${status.index+1}" onclick="changeColor(${status.index+1})" type="button" class="btn-color layui-btn layui-btn-warm">
                        <fmt:formatDate value="${u}" var="validDate1" pattern="yyyy.MM.dd"/> ${validDate1}
                    </button>
                </span>
                </c:forEach>

                <p>票档</p>
                <c:forEach items="${jsonData.data.ticketPricePrice}" var="u" varStatus="status">
                <span>
                    <button type="button" class="layui-btn layui-btn-warm">${u}元</button>
                </span>
                </c:forEach>
                <p>
                <form method="post" action="${pageContext.request.contextPath}/api/v1/pub/user/seats">
                    <input type="hidden" name="ticketDetailsId" value="${jsonData.data.ticketDetailsId}">
                    <input type="hidden" name="title"
                           value="【${jsonData.data.ticketAddressCity}】${jsonData.data.ticketDetailsInfo}">
                    <c:forEach items="${jsonData.data.ticketPricePrice}" var="u" varStatus="status">
                        <input type="hidden" name="price" value="${u}">
                    </c:forEach>
                    <button type="submit" class="layui-btn layui-btn-normal layui-btn-lg layui-btn-radius">立即选座</button>
                </form>
                </p>
            </div>
        </div>

        <div class="detalis-pro">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="font-size: 15px; font-weight: 700;">项目详情</li>
                    <li style="font-size: 15px; font-weight: 700;">购票须知</li>
                    <li style="font-size: 15px; font-weight: 700;">观演须知</li>
                </ul>
                <div class="layui-tab-content">
                    <p style="font-size: 15px; font-weight: 700;">特别提醒：</p>

                    <p style="margin-bottom: 10px;">项目为实名制观演，观演人需持购票时登记的有效身份证件，入场时进行核验并进行人脸比对，确认人证一致方可入场。请正确填写观演人信息。</p>
                    <div class="layui-tab-item layui-show">
                        <img src="${jsonData.data.ticketDetailsTicketImgInfoUrl}" style="height: 500px">
                    </div>
                    <div class="layui-tab-item">

                        <p style="font-size: 15px; font-weight: 700;">限购规则</p>
                        <p>每笔订单最多购买4张、每个账号最多购买4张。</p>
                        <p style="font-size: 15px; font-weight: 700;">退票/换票规则</p>
                        <p>票品为有价证券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。</p>
                        <p>配送信息说明</p>

                        <p>不支持修改配送电话、地址等信息</p>
                        <p style="font-size: 15px; font-weight: 700;">入场规则</p>

                        <p>支持多种票品验票后入场，如证件电子票。</p>
                        <p style="font-size: 15px; font-weight: 700;">儿童购票</p>

                        <p>1.2米以上凭成人票入场，1.2米以下谢绝入场</p>
                        <p style="font-size: 15px; font-weight: 700;">发票说明</p>

                        <p>演出开始前，去【APP-订单详情页】提交发票申请。演出结束后1个月左右邮寄给你，需自付邮费。</p>
                        <p style="font-size: 15px; font-weight: 700;">实名购票规则</p>

                        <p>一张门票对应一个证件；证件支持：港澳居民来往内地通行证/身份证/军官证/台湾居民来往大陆通行证/护照</p>
                        <p style="font-size: 15px; font-weight: 700;">异常排单说明</p>

                        <p>对于异常订购行为，大麦网有权在订单成立或者生效之后取消相应订单。异常订购行为包括但不限于以下情形： （1）通过同一ID订购超出限购张数的订单。</p>
                        <p>（2）经合理判断认为非真实消费者的下单行为，包括但不限于通过批量相同或虚构的支付账号、收货地址（包括下单时填写及最终实际收货地址）、收件人、电话号码订购超出限购张数的订单。</p>
                        <p></p>
                    </div>
                    <div class="layui-tab-item">
                        <p style="font-size: 15px; font-weight: 700;">演出时长</p>

                        <p>以现场为准</p>
                        <p style="font-size: 15px; font-weight: 700;">入场时间</p>

                        <p>请于开始前约120分钟入场</p>
                        <p style="font-size: 15px; font-weight: 700;">禁止携带物品</p>

                        <p>由于安保和版权的原因，大多数演出、展览及比赛场所禁止携带食品、饮料、专业摄录设备、打火机等物品，请您注意现场工作人员和广播的提示，予以配合。</p>
                        <p style="font-size: 15px; font-weight: 700;">寄存说明</p>
                        <p>无寄存处,请自行保管携带物品，谨防贵重物品丢失。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 尾部导航 -->
        <%@include file="foot-nav.jsp" %>

        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/js/jquery-2.2.3.min.js"></script>
        <script type="text/javascript">
            layui.use('element', function () {
                var element = layui.element;
            });

            $().ready(function () {
                $("#btn-color1").removeClass("layui-btn-warm");
                $("#btn-color1").addClass("layui-btn-normal");
            })

            function changeColor(index){
                console.log(index)
                let selected = $(".btn-color");
                for (let i = 0;i<selected.length;i++){
                    console.log(selected[i])
                    console.log(typeof selected[i])
                    $(selected[i]).removeClass("layui-btn-normal");
                    $(selected[i]).addClass("layui-btn-warm");
                }
                console.log("#btn-color"+index)
                $("#btn-color"+index).removeClass("layui-btn-warm");
                $("#btn-color"+index).addClass("layui-btn-normal");
            }
        </script>
    </body>
</html>
